<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	<table width="100%">
		<tr>
			<td width="33%">
				<div id="chart1" style="width: 100%;height:300px;"></div>
			</td>
			<td  width="33%">
				<div id="chart2" style="width: 100%;height:300px;"></div>
			</td>
			<td  width="33%">
				<div id="chart3" style="width: 100%;height:300px;"></div>
			</td>
		</tr>
	</table>
</body>
<script type="text/javascript" src="../js/echarts.min.js" ></script>
<script>
	var chart1 = echarts.init(document.getElementById('chart1'));
	var option1 = {
		title:{
			text:"注册人数趋势图"
		},
	    xAxis: {
	        data: ['1月', '2月', '3月', '4月', '5月', '6月']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [{
	        data: [10, 20, 100, 20, 40, 50],
	        type: 'line',
	        smooth: true
	    }]
	}
	chart1.setOption(option1);
</script>
<script>
	var chart2 = echarts.init(document.getElementById('chart2'));
	var option2 = {
		title:{
			text:"注册用户性别分析"
		},
	    xAxis: {
	        type: 'category',
	        data: ['男','女','总人数']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [{
	        data: [200, 100, 300],
	        type: 'bar'
	    }]
	}
	chart2.setOption(option2);
</script>
<script>
	var chart3 = echarts.init(document.getElementById('chart3'));
	var option3 = {
		title:{
			text:"注册用户年龄分析"
		},
	    series: [{
	       	type: 'pie',
            radius: '55%',
            data:[
                {name:'20岁以下', value:50},
                {name:'20-40岁', value:150},
                {name:'40岁以上', value:100}
            ]
	    }]
	}
	chart3.setOption(option3);
</script>
</html>
